<script setup lang="ts">
import {useIndexStore} from "@/store/main.ts";
import PcDialogAddUser from "./pc-dialog-addUser.vue";
import PcDialogAddGroup from "./pc-dialog-addGroup.vue";
import {useUserStore} from "@/store/user.js";

const indexStore = useIndexStore()
const userStore = useUserStore()

// 匹配高亮的函数
const highlight = (text: string, keyword: string): string => {
  if (!keyword) return text;
  const regex = new RegExp(`(${keyword})`, 'gi');
  let matchCount = 0;
  return text.replace(regex, (match, group) => {
    matchCount++;
    if (matchCount === 1) {
      return `<div class="bg-yellow-200">${group}</div>`;
    } else {
      return match;
    }
  });
};
</script>

<template>
  <div class="p-5 h-100%">
    <div v-if="!userStore.inner_search_key">
      搜索建议
      <div class="p-2 *:m-2">
        <el-button>@我</el-button>
        <el-button>特别关心</el-button>
      </div>
      <el-empty image-size="150" description="换个关键词试试？"/>
    </div>
    <div v-else>
      <div v-if="userStore.search_users.length > 0">
        <div class="p-2 text-xl">用户</div>
        <template v-for="user in userStore.search_users.slice(0,5)">
          <div class="*:flex-1 m-2 cursor-pointer hover:bg-gray-200">
            <div class="flex flex-wrap">
              <div class="flex text-[12px] items-center">
                <div class="flex justify-between">
                  <div class="flex justify-center items-center">
                    <el-avatar :size="50" :src="user.avater"/>
                  </div>
                  <div class="text-[12px] items-center *:m-5">
                    <div class="flex" v-html="highlight(user.name,userStore.search_key)"></div>
                    <div class="flex" v-html="highlight(user.account,userStore.search_key)"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <div v-if="userStore.search_groups.length > 0">
        <div class="p-2 text-xl">群聊</div>
        <div class="w-full flex *:flex-1">
          <div class="flex" v-for="group in userStore.search_groups.slice(0,5)">
            <el-avatar :size="50" :src="group.avater"/>
            <div class="flex *:w-full flex-wrap ml-2 text-[12px] items-center">
              <div>{{ group.name }}</div>
              <div>{{ group.account }}</div>
            </div>
            <div class="m-0 flex justify-center items-center">
              <pc-dialog-add-group :add_group="group"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>